본문으로 건너뛰기

3회차

정보

JS 개념 학습 및 정리

JavaScript​

  • 브라우저를 조작할 수 있는 언어는 유일하게 'Javascript' 뿐입니다. 그런 Javascript를 통해 브라우저를 관리하여 웹페이지 기능을 만듭니다.
  • 관리를 하기 위해선 우선 브라우저의 두 가지 모델을 알아야 합니다.

Browser Model​

  • DOM(Document Object Model 의 약자)

    • 문서에 대한 모든 내용을 담고있는 Object, Document에 관련 된 내용 모두!
    • 문서 즉 열려진 페이지에 대한 정보를 따로 객체화 시켜서 관리함

      HTML

  • BOM(Brouser Object Model 의 약자)

    • 브라우저에 대한 모든 내용을 담고있는 Object, Document에 관련 된 내용 모두!
    • 뒤로가기, 북마크, 즐겨찾기, 히스토리, URL정보 등
    • 브라우저가 가지고 있는 정보를 따로 객체화 시켜서 관리함

      navigator, screen, location, frames, history, XHR 등

DOM(Document Object Model)​

  • 문서를 다루기 위한 문서 프로그래밍 인터페이스 Tree Model
    • 문서 구조화 후 구조화된 구성 요소를 하나의 객체로 취급
    • DOM을 해석할 땐 Parsing하여 영역을 나누어 문자열을 해석한다.

주요 객체​

  • window : DOM을 표현하는 창, 가장 최상위 객체
  • document : 페이지 컨텐츠의 Entry Point 역할을 하며, 문서의 전체적인 태그를 포함

BOM(Browser Object Model)​

  • JS와 Browser와 소통하기 위한 Model
    • 버튼, URL, input 등 브라우저 및 웹 페이지를 제어할 수 있도록 제공
    • 대화 상자, 새 탭, 인쇄 등의 기능을 열어 사용
// F12를 눌러 '개발자 모드'를 연 후 커맨드에 입력하면 확인 가능

window.confirm();
// 메세지 확인 및 취소 버튼이 있는 대화 창
window.open();
// 새 탭
window.print();
// 인쇄 창

결과​

노트
  • JS 개념 학습 및 정리